<%- include ../include/head %>
<input type="hidden" id="js_current" value="hotel_add"/>
<!-- Page Head -->
<h2>Add a Hotel</h2>
<div class="content-box"><!-- Start Content Box -->
	<div class="content-box-header">
		<h3>Information</h3>
		<ul class="content-box-tabs">
			<li><a class="default-tab" href="#tab0">Main</a></li>
			<li><a href="#tab1">Rooms</a></li>
			<li><a href="#tab2">Area</a></li>
			<li><a href="#tab3">How to arrive</a></li>
			<li><a href="#tab4">Food</a></li>
			<li><a href="#tab5">Pictures</a></li>
			<li><a href="#tab6">Facilities</a></li>
		</ul>
		<div class="clear"></div>
	</div> <!-- End .content-box-header -->
	<div class="content-box-content">
		<form action="/admin/hotel/add" id="js_main" enctype="multipart/form-data">
		<div id="tab0" class="tab-content default-tab">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Country</label>
						<select name="country_id" required class="small-input">
							<option value="1">Afghanistan</option>
							<option value="2">Albania</option>
							<option value="3">Algeria</option>
							<option value="4">American Samoa</option>
							<option value="5">Andorra</option>
							<option value="6">Angola</option>
						</select>
					</p>
					<p>
						<label>City</label>
						<select name="city_id" required class="small-input">
							<option value="1">ccc1111</option>
							<option value="2">ccc222</option>
							<option value="3">ccc333</option>
							<option value="4">ccc444</option>
							<option value="5">ccc555</option>
							<option value="6">ccc666</option>
						</select>
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Name</label>
						<input type="text" class="text-input small-input" required name="name">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Address</label>
						<input type="text" class="text-input small-input" required name="hotel_address">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Phone 1</label>
						<input type="text" class="text-input small-input" required name="phone1">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Phone 2</label>
						<input type="text" class="text-input small-input" name="phone2">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Fax</label>
						<input type="text" class="text-input small-input" name="fax">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>Mobile Phone</label>
						<input type="text" class="text-input small-input" name="mobile">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<label>rates_added</label>
						<input type="text" class="text-input small-input" name="rates_added" required/>

					</p>
					<p>
						<label>Email</label>
						<input type="text" class="text-input small-input" required name="contact_email">
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!--&lt;!&ndash; Classes for input-notification: success, error, information, attention &ndash;&gt;-->
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab0  Main-->
		<div id="tab1" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Room Type</label>
						<input class="text-input small-input" type="text" name="roomtype0" />
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!-- Classes for input-notification: success, error, information, attention -->
					</p>
					<p>
						<label>No of Rooms</label>
						<input class="text-input small-input" type="text" name="roomnum0" />
						<!--<span class="input-notification success png_bg">Successful message</span> -->
						<!-- Classes for input-notification: success, error, information, attention -->
					</p>
					<p>
						<label>Please write the rooms description below</label>
						<textarea class="text-input textarea wysiwyg" name="room_description1" cols="79" rows="15"></textarea>
					</p>
					<p>
						<label>Facilities</label>
						<input type="checkbox" value="minibar" name="things1[]" id="things1[]">Mini bar
						<input type="checkbox" value="bathtub" name="things1[]" id="things1[]">Bath Tub
						<input type="checkbox" value="inroomsafe" name="things1[]" id="things1[]">In room safe
						<input type="checkbox" value="tv" name="things1[]" id="things1[]">Tv/Pay-tv
					<br/>
						<input type="checkbox" value="balcony" name="things1[]" id="things1[]">Balcony
						<input type="checkbox" value="radio" name="things1[]" id="things1[]">Radio
						<input type="checkbox" value="phone" name="things1[]" id="things1[]">Phone
						<input type="checkbox" value="ac" name="things1[]" id="things1[]">A/C
					<br />
						<input type="checkbox" value="bathacc" name="things1[]" id="things1[]">Bath accessories
						<input type="checkbox" value="wc" name="things1[]" id="things1[]">WC
						<input type="checkbox" value="hairdryer" name="things1[]" id="things1[]">Hairdryer
						<input type="checkbox" value="desk" name="things1[]" id="things1[]">Desk
					<br />
						<input type="checkbox" value="towels" name="things1[]" id="things1[]">Towels
						<input type="checkbox" value="view" name="things1[]" id="things1[]">View
						<input type="checkbox" value="heating" name="things1[]" id="things1[]">Heating
					</p>
					<p>
						<label>Pictures</label>
						<input type="file" id="roompicture01" name="roompicture01">
						<br />
						<input type="file" id="roompicture02" name="roompicture02">
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab1 Rooms-->
		<div id="tab2" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Please write the rooms description below</label>
						<textarea class="text-input textarea wysiwyg" name="area_description" cols="79" rows="15"></textarea>
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab2 Area-->
		<div id="tab3" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Please write the rooms description below</label>
						<textarea class="text-input textarea wysiwyg" name="travel_description" cols="79" rows="15"></textarea>
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab3 How to Arrive-->
		<div id="tab4" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Please write the rooms description below</label>
						<textarea class="text-input textarea wysiwyg" name="food_description" cols="79" rows="15"></textarea>
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab4 Food-->
		<div id="tab5" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p>
						<label>Please select up to 5 hotel pictures to upload below<br />
							(JPG, GIF, PNG, max 2MB)</label>
						<input type="file" id="picture1" required="required" name="photo1"><br />
						<input type="file" id="picture2" required="required" name="photo2"><br />
						<input type="file" id="picture3" required="required" name="photo3"><br />
						<input type="file" id="picture4" required="required" name="photo4"><br />
						<input type="file" id="picture5" required="required" name="photo5">
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab5 Picture-->
		<div id="tab6" class="tab-content">
				<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
					<p id="js_choice">
						<label>Please select the available facilities below. <br/>
							Selected facilities are highlighted with green color.</label>
                        <span class="icon"><i class="icon-font" title="飞机场">&#xe603;</i></span>
						<span class="icon"><i class="icon-font" title="婴儿床">&#xe601;</i></span>
						<span class="icon"><i class="icon-font" title="饮料">&#xe602;</i></span>
						<span class="icon"><i class="icon-font" title="alarm">&#xe607;</i></span>
						<span class="icon"><i class="icon-font" title="海景">&#xe606;</i></span>
						<span class="icon"><i class="icon-font" title="电梯">&#xe605;</i></span>
						<span class="icon"><i class="icon-font" title="停车位">&#xe604;</i></span>
						<br/>
						<span class="icon"><i class="icon-font" title="娱乐">&#xe608;</i></span>
						<span class="icon"><i class="icon-font" title="健身房">&#xe609;</i></span>
						<span class="icon"><i class="icon-font" title="上锁">&#xe60a;</i></span>
						<span class="icon"><i class="icon-font" title="网络">&#xe60f;</i></span>
						<span class="icon"><i class="icon-font" title="洗浴">&#xe614;</i></span>
						<span class="icon"><i class="icon-font" title="兑换">&#xe611;</i></span>
						<span class="icon"><i class="icon-font" title="洗衣机">&#xe612;</i></span>
						<br />
						<span class="icon"><i class="icon-font" title="咖啡杯">&#xe610;</i></span>
						<span class="icon"><i class="icon-font" title="空调">&#xe616;</i></span>
						<span class="icon"><i class="icon-font" title="游泳馆">&#xe60e;</i></span>
						<span class="icon"><i class="icon-font" title="电视">&#xe60d;</i></span>
						<span class="icon"><i class="icon-font" title="包裹">&#xe613;</i></span>
						<span class="icon"><i class="icon-font" title="空调">&#xe615;</i></span>
						<span class="icon"><i class="icon-font" title="熨斗">&#xe60c;</i></span>
						<br />
						<span class="icon"><i class="icon-font" title="宠物">&#xe60b;</i></span>
						<span class="icon"><i class="icon-font" title="代卖香烟">&#xe617;</i></span>
					</p>
					<p>
						<input class="button" type="submit" value="Submit" />
					</p>
				</fieldset>
				<div class="clear"></div><!-- End .clear -->
		</div> <!-- End #tab6 Facilities-->
		</form>
	</div> <!-- End .content-box-content -->
</div> <!-- End .content-box -->
<script>
	requirejs(["dialog","form"],function(){
		//选择房间设施
		$("#js_choice").find("span").bind("click",function(){
			var self= $(this);
			self.toggleClass("z-sel");
		});

		//update images
		var data = new FormData();
		var oFiles = $("#js_main").find("input[type='file']");
		if (oFiles) {
			oFiles.change(function(){
				var _key = $(this).attr("name");
				var _value = $(this)[0].files;
				data.append(_key,_value[0]);
			});
		}

		//主要信息
		$("#js_main").form({
			onAccept:function(ret){
				var d = dialog();
				d.content('图片上传中。。。');
				d.show();
                //update images
				var data = new FormData();
				data.append("id",ret.insertId);
				var oFiles = $("#js_main").find("input[type='file']");
				console.log(oFiles.size());
				if (oFiles) {
					oFiles.each(function(){
						var _key = $(this).attr("name");
						var _value = $(this)[0].files;
						if(/^photo/i.test(_key)){
						  data.append(_key,_value[0]);
						  console.log(_key + "- " + _value[0]);
						}

					});
				}
				console.log(2);
				$.ajax({
					cache: false,
					type: 'post',
					dataType: 'json',
					url:'/admin/hotel/update',
					data : data,
					contentType: false,
					processData: false,
					success : function () {
						//文字上传成功
						d.content("上传成功");
						d.close();
					}
				});
			}
		});
	});
</script>
<%- include ../include/foot %>